<script setup lang="ts">
const modelContent = [
    { label: '下拉选项一', value: 'option1' },
    { label: '下拉选项二', value: 'option2' },
    { label: '下拉选项三', value: 'option3' },
    { label: '下拉选项四', value: 'option4' }
];
const modelContent1 = [
    { label: '普通状态', value: 'option1' },
    { label: '被选中状态', value: 'option2', active: true },
    { label: '禁用状态', value: 'option3', disabled: true },
    { label: '分行状态', value: 'option4', divide: true }
];

// demo部分函数
/** 关闭下拉框 */
function closeMenu(event: any) {
    const elements = Array.from(event.currentTarget.getElementsByClassName('dropdown-menu'));
    elements.forEach((element: any) => {
        element.className = 'dropdown-menu';
    });
}

/** 展开下拉框 */
function dpSectionState(event: any) {
    document.addEventListener('scroll', closeMenu);
    const dropdownClassName = event.currentTarget.getElementsByClassName('dropdown-menu')[0].className;
    event.currentTarget.getElementsByClassName('dropdown-menu')[0].className =
        dropdownClassName === 'dropdown-menu' ? 'dropdown-menu show' : 'dropdown-menu';
}

function selectHandler(v) {
    console.log(v);
}
</script>
<template>
    <div>
        <!-- ———————————————————使用示例——————————————————————— -->
        <h2>使用示例</h2>
        <f-dropdown></f-dropdown>

        <h5 style="margin-top: 20px">基本用法</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :type="'secondary'" :title="'下拉按钮1'" @select="selectHandler"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'success'" :title="'下拉按钮2'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'warning'" :title="'下拉按钮3'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'danger'" :title="'下拉按钮4'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'info'" :title="'下拉按钮5'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'primary'" :title="'下拉按钮6'"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">下拉框状态</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :model="modelContent1"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">尺寸</h5>
        <div style="display: flex; align-items: flex-end">
            <f-dropdown style="margin: 5px" :title="'大尺寸'" :size="'large'"></f-dropdown>
            <f-dropdown style="margin: 5px" :title="'小尺寸'" :size="'small'"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">按钮分开</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :title="'按钮分开'" :split-button="true"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'danger'" :title="'按钮分开'" :split-button="true"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">按钮禁用</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :title="'按钮禁用'" :disabled="true"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">下拉框内容</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :title="'默认下拉框'"></f-dropdown>
            <f-dropdown style="margin: 5px" :title="'修改展示内容'" :model="modelContent"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">图标下拉</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :title="''" :type="'link'" :icon-class="'f-icon-gear'"></f-dropdown>
            <f-dropdown style="margin: 5px" :title="''" :type="'link'" :icon-class="'f-icon-gear'" :disabled="true"></f-dropdown>
        </div>

        <h5 style="margin-top: 20px">下拉框展开方向</h5>
        <div style="display: flex">
            <f-dropdown style="margin: 5px" :type="'secondary'" :title="'向右展开'" :position="'right'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'danger'" :title="'向上展开'" :position="'top'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'success'" :title="'向下展开'" :position="'bottom'"></f-dropdown>
            <f-dropdown style="margin: 5px" :type="'warning'" :title="'向左展开'" :position="'left'"></f-dropdown>
        </div>

        <h5 style="margin-top: 40px">*下拉按钮的其他扩展（待补充）</h5>
    </div>
</template>
